<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="unusual content-top">
        <div class="un-top">
          <div class="list-nav">运行状况统计</div>
          <div class="un-chart" style="width: 100%">
            <div class="chart-title">{{ mouthTime }}</div>
            <canvas id="mountNode" style="width: 10rem"></canvas>
          </div>
        </div>
        <div class="un-bottom">
          <div class="list-nav">今日运行状况</div>
          <div class="un-chart" style="width: 100%">
            <div class="chart-title">{{ dayTime }}</div>
            <canvas
              id="todayChart"
              style="width: 10rem; height: 6.2133rem"
            ></canvas>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import NavBar from "../../components/NavBar.vue";
import { getMouthUnusualInfo } from "../../api/unusual";
export default {
  name: "unusual",
  components: {
    NavBar,
  },
  data() {
    return {
      mouthData: [],
      dayData: [
        { category: "更换工装", totleTime: 0 },
        { category: "计划停机", totleTime: 0 },
        { category: "设备故障", totleTime: 0 },
        { category: "物料等待", totleTime: 0 },
        { category: "质量调整", totleTime: 0 },
        { category: "更换刀具", totleTime: 0 },
      ],
      mouthTime: this.$moment().format("YYYY年MM月"),
      dayTime: this.$moment().format("YYYY年MM月DD日"),
      isLoading: false,
    };
  },
  created() {
    this.getmouthUnusualData();
    this.getDayUnusualData();
  },
  methods: {
    onRefresh() {
      this.getmouthUnusualData();
      this.getDayUnusualData();
    },
    getmouthUnusualData() {
      this.$store.commit("showLoading");
      const params = { category: "mouth" };
      getMouthUnusualInfo(params)
        .then((res) => {
          console.log(res);
          this.$store.commit("hideLoading");
          this.mouthData = res.data;
          this.isLoading = false;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDayUnusualData() {
      const params = { category: "day" };
      getMouthUnusualInfo(params)
        .then((res) => {
          this.dayData = res.data;
          this.todayChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    drawChart() {
      var _that = this;
      var chart = new this.$F2.Chart({
        id: "mountNode",
        pixelRatio: window.devicePixelRatio,
        padding: [45, "auto", "auto", "auto"],
      });
      chart.source(_that.mouthData);
      chart.coord("polar", {
        transposed: true,
        radius: 0.9,
        innerRadius: 0.5,
      });

      chart.legend(false);
      chart.axis(false);
      chart.tooltip(false);

      // 添加饼图文本
      chart.pieLabel({
        sidePadding: 60,
        activeShape: true,
        label1: function label1(data, color) {
          return {
            text: data.category,
            fill: color,
          };
        },
        label2: function label2(data, color) {
          return {
            text: data.totleTime + "min",
            fill: color,
          };
        },
        onClick: function onClick(ev) {
          var dataList = ev.data;
          if (dataList) {
            _that.$router.push("/unlist/" + dataList.index + "/0");
          }
        },
      });
      chart
        .interval()
        .position("a*totleTime")
        .color("category", [
          "#1890FF",
          "#13C2C2",
          "#2FC25B",
          "#FACC14",
          "#F04864",
          "#066EF4",
        ])
        .adjust("stack");
      chart.render();
    },

    todayChart() {
      var todaychart = new this.$F2.Chart({
        id: "todayChart",
        pixelRatio: window.devicePixelRatio,
      });
      todaychart.source(this.dayData, {
        count: {
          tickCount: 10,
        },
      });
      todaychart.tooltip(false);
      todaychart.interval().position("category*totleTime");
      todaychart.render();
      // 配置柱状图点击交互
      let _that = this;
      todaychart.interaction("interval-select", {
        onEnd: function (ev) {
          const data = ev.data;
          const selected = ev.selected;
          if (selected) {
            _that.$router.push("/unlist/" + data.index + "/1");
          }
          canvas.draw();
        },
      });
      // 绘制柱状图文本
      const offset = -5;
      const canvas = todaychart.get("canvas");
      const group = canvas.addGroup();
      this.dayData.forEach(function (obj) {
        const point = todaychart.getPosition(obj);
        const text = group.addShape("text", {
          attrs: {
            x: point.x,
            y: point.y + offset,
            text: obj.totleTime,
            textAlign: "center",
            textBaseline: "bottom",
            fill: "#808080",
          },
        });
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.todayChart();
    });
   
  },
};
</script>

<style scoped lang="less">
.unusual-nav {
  height: 1.2266rem;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-size: 0.4266rem;
  line-height: 1.2266rem;
  text-align: center;
}
.unusual {
  .list-nav {
    font-size: 0.4rem;
    height: 1.22rem;
    line-height: 1.22rem;
    text-align: center;
    background-color: #066ef4;
    color: #fff;
  }
  .un-chart {
    .chart-title {
      margin-top: 15px;
      font-size: 0.4rem;
      text-align: center;
      color: #7f7f7f;
    }
  }
}
</style>
